import React, { useEffect, useMemo, useState } from 'react'
import axios from 'axios'
import { Select, DatePicker, Button, Table, Space, Modal, message } from 'antd'
import { useNavigate } from 'react-router-dom'

export default function Homework() {
    const navigate = useNavigate()
    const [list, setList] = useState([])
    const [filteredList, setFilteredList] = useState([])
    const [filters, setFilters] = useState({
        subject: '语文',
        xd: '小学',
        grade: '一年级',
        cla: '一班',
        startDate: null,
        endDate: null
    })

    // 获取作业列表
    const getList = () => {
        axios.get('http://127.0.0.1:3000/zy').then(res => {
            if (res.data.code === 200) {
                setList(res.data.data)
                setFilteredList(res.data.data)
            }
        })
    }

    useEffect(() => {
        getList()
    }, [])

    // 更新筛选条件
    const updateFilter = (key, value) => {
        setFilters(prev => ({ ...prev, [key]: value }))
    }

    // 多条件筛选
    const handleSearch = () => {
        let filtered = [...list]
        
        if (filters.subject) {
            filtered = filtered.filter(item => item.subject === filters.subject)
        }
        if (filters.xd) {
            filtered = filtered.filter(item => item.xd === filters.xd)
        }
        if (filters.grade) {
            filtered = filtered.filter(item => item.grade === filters.grade)
        }
        if (filters.cla) {
            filtered = filtered.filter(item => item.class === filters.cla)
        }
        if (filters.startDate) {
            const startDateStr = filters.startDate.format('YYYY-MM-DD')
            filtered = filtered.filter(item => item.date >= startDateStr)
        }
        if (filters.endDate) {
            const endDateStr = filters.endDate.format('YYYY-MM-DD')
            filtered = filtered.filter(item => item.date <= endDateStr)
        }
        
        setFilteredList(filtered)
    }

    // 重置筛选条件
    const handleReset = () => {
        setFilters({
            subject: '语文',
            xd: '小学',
            grade: '一年级',
            cla: '一班',
            startDate: null,
            endDate: null
        })
        setFilteredList(list)
    }

    // 表格列配置
    const columns = [
        {
            title:"作业名称",
            dataIndex:"name",
            key:"name"
        },
        {
            title: '学科',
            dataIndex: 'subject',
            key: 'subject',
        },
        {
            title: '学段',
            dataIndex: 'xd',
            key: 'xd',
        },
        {
            title: '年级',
            dataIndex: 'grade',
            key: 'grade',
        },
        {
            title: '班级',
            dataIndex: 'class',
            key: 'class',
        },
        {
            title: '作业内容',
            dataIndex: 'content',
            key: 'content',
        },
        {
            title: '作业时间',
            dataIndex: 'time',
            key: 'time',
        },
        {
            title: '操作',
            key: 'action',
            render: (_, record) => (
                <Space size="middle">
                    <Button type="link" onClick={() => handleView(record)}>
                        查看
                    </Button>
                    
                </Space>
            ),
        },
    ]

    // 查看作业详情 - 跳转到详情页面
    const handleView = (record) => {
       navigate(`/xiang?_id=${record._id}`)
    }

    return (
        <div>
            <h2>作业管理</h2>
            <div style={{ display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: '10px' }}>
                <div>
                    <span>时间范围：</span>
                    <DatePicker 
                        value={filters.startDate} 
                        onChange={(date) => updateFilter('startDate', date)} 
                        placeholder="开始日期"
                        style={{ marginRight: '8px' }}
                    />
                    <DatePicker 
                        value={filters.endDate} 
                        onChange={(date) => updateFilter('endDate', date)} 
                        placeholder="结束日期"
                    />
                </div>
                <div>
                    <span>学科：</span>
                    <Select
                        value={filters.subject}
                        style={{ width: 120 }}
                        onChange={(value) => updateFilter('subject', value)}
                        options={[
                            { value: '语文', label: '语文' },
                            { value: '数学', label: '数学' },
                            { value: '历史', label: '历史' },
                            { value: '英语', label: '英语' },
                        ]}
                    />
                </div>
                <div>
                    <span>学段：</span>
                    <Select
                        value={filters.xd}
                        style={{ width: 120 }}
                        onChange={(value) => updateFilter('xd', value)}
                        options={[
                            { value: '小学', label: '小学' },
                            { value: '初中', label: '初中' },
                        ]}
                    />
                </div>
                <div>
                    <span>年级：</span>
                    <Select
                        value={filters.grade}
                        style={{ width: 120 }}
                        onChange={(value) => updateFilter('grade', value)}
                        options={[
                            { value: '一年级', label: '一年级' },
                            { value: '二年级', label: '二年级' },
                            { value: '三年级', label: '三年级' },
                        ]}
                    />
                </div>
                <div>
                    <span>班级：</span>
                    <Select
                        value={filters.cla}
                        style={{ width: 120 }}
                        onChange={(value) => updateFilter('cla', value)}
                        options={[
                            { value: '一班', label: '一班' },
                            { value: '二班', label: '二班' },
                            { value: '三班', label: '三班' },
                        ]}
                    />
                </div>
            </div>
            <div style={{ marginTop: '20px' }}>
                <Button type="primary" onClick={handleSearch}>
                    查询
                </Button>
                <Button style={{ marginLeft: '8px' }} onClick={handleReset}>
                    重置
                </Button>
            </div>

            {/* 显示查询结果 */}
            <div style={{ marginTop: '20px' }}>
                {filteredList.length > 0 ? (
                    <Table 
                        columns={columns} 
                        dataSource={filteredList} 
                        rowKey="id"
                        pagination={{
                            pageSize: 10,
                            showSizeChanger: true,
                            showQuickJumper: true,
                            showTotal: total => `共 ${total} 条`
                        }}
                    />
                ) : (
                    <p>暂无数据</p>
                )}
            </div>
        </div>
    )
}
